<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>百霸陪学</title>
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="fonts/icomoon.css">
		<link rel="stylesheet" href="css/loder.css">
	</head>
	<body>
		<div class="viewport">
			<div class="column">
				<!--概览-->
				<div class="overview panel">
					<div class="inner">
						<div class="item">
							<h4>120,899</h4>
							<span>
								<i class="icon-dot" style="color: #006cff"></i>
								总数
							</span>
						</div>
						<div class="item">
							<h4>190</h4>
							<span>
								<i class="icon-dot" style="color: #6acca3"></i>
								高中
							</span>
						</div>
						<div class="item">
							<h4>169</h4>
							<span>
								<i class="icon-dot" style="color: #6acca3"></i>
								初中
							</span>
						</div>
						<div class="item">
							<h4>8</h4>
							<span>
								<i class="icon-dot" style="color: #ed3f35"></i>
								其他
							</span>
						</div>
					</div>
				</div>
				<!--监控-->
				<!--监控-->
				<div class="monitor panel">
					<div class="inner">
						<div class="tabs">
							<a href="javascript:;" data-index="0" class="active">实时陪学监控</a>
							<!-- <a href="javascript:;" data-index="1">异常设备监控</a> -->
						</div>
						<div class="content" style="display: block;">
							<div class="head">
								<span class="col">学员</span>
								<span class="col">学习内容</span>
								<span class="col">陪学时间</span>
							</div>
							<div class="marquee-view">
								<div class="marquee">
									<div class="row">
										<span class="col">张三</span>
										<span class="col">10:00-10:30 课本 - 物理-拆书-必修三[高二-物理-人教版]1.电势能和电势-26, 2.电势差-31；(第31-34页)电势差★★——薛梦迪10:23:31</span>
										<span class="col">田老师</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">李四</span>
										<span class="col">10:00-10:30 课本 - 物理-拆书-必修三[高二-物理-人教版]1.电势能和电势-26, 2.电势差-31；(第31-34页)电势差★★——薛梦迪10:23:31</span>
										<span class="col">王老师</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">王五</span>
										<span class="col">10:00-10:30 课本 - 物理-拆书-必修三[高二-物理-人教版]1.电势能和电势-26, 2.电势差-31；(第31-34页)电势差★★——薛梦迪10:23:31</span>
										<span class="col">李老师</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">王五</span>
										<span class="col">10:00-10:30 课本 - 物理-拆书-必修三[高二-物理-人教版]1.电势能和电势-26, 2.电势差-31；(第31-34页)电势差★★——薛梦迪10:23:31</span>
										<span class="col">王老师</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">王五</span>
										<span class="col">10:00-10:30 课本 - 物理-拆书-必修三[高二-物理-人教版]1.电势能和电势-26, 2.电势差-31；(第31-34页)电势差★★——薛梦迪10:23:31</span>
										<span class="col">王老师</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">王五</span>
										<span class="col">10:00-10:30 课本 - 物理-拆书-必修三[高二-物理-人教版]1.电势能和电势-26, 2.电势差-31；(第31-34页)电势差★★——薛梦迪10:23:31</span>
										<span class="col">王老师</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">王五</span>
										<span class="col">10:00-10:30 课本 - 物理-拆书-必修三[高二-物理-人教版]1.电势能和电势-26, 2.电势差-31；(第31-34页)电势差★★——薛梦迪10:23:31</span>
										<span class="col">王老师</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">王老师</span>
										<span class="col">10:00-10:30 课本 - 物理-拆书-必修三[高二-物理-人教版]1.电势能和电势-26, 2.电势差-31；(第31-34页)电势差★★——薛梦迪10:23:31</span>
										<span class="col">王五</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">王五</span>
										<span class="col">10:00-10:30 课本 - 物理-拆书-必修三[高二-物理-人教版]1.电势能和电势-26, 2.电势差-31；(第31-34页)电势差★★——薛梦迪10:23:31</span>
										<span class="col">王老师</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">王五</span>
										<span class="col">10:00-10:30 课本 - 物理-拆书-必修三[高二-物理-人教版]1.电势能和电势-26, 2.电势差-31；(第31-34页)电势差★★——薛梦迪10:23:31</span>
										<span class="col">王老师</span>
										<span class="icon-dot"></span>
									</div>
								</div>
							</div>
						</div>
						<!-- <div class="content">
                <div class="head">
                  <span class="col">异常时间</span>
                  <span class="col">设备地址</span>
                  <span class="col">异常代码</span>
                </div> -->
						<!-- <div class="marquee-view">
                  <div class="marquee">
                    <div class="row">
                      <span class="col">20190701</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000001</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20190701</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000002</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20190703</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000002</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20190704</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000002</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20190705</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000002</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20190706</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000002</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20190707</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000002</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20190708</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000002</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20190709</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000002</span>
                      <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                      <span class="col">20190710</span>
                      <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                      <span class="col">1000002</span>
                      <span class="icon-dot"></span>
                    </div>
                  </div>
                </div> 
              </div>-->
					</div>
				</div>
				<!--点位-->
				<!-- 点位 -->
				<div class="point panel">
					<div class="inner">
						<h3>分布统计</h3>
						<div class="chart">
							<div class="pie"></div>
							<div class="data">
								<div class="item">
									<h4>320,11</h4>
									<span>
										<i class="icon-dot" style="color: #ed3f35"></i>
										男
									</span>
								</div>
								<div class="item">
									<h4>418</h4>
									<span>
										<i class="icon-dot" style="color: #eacf19"></i>
										女
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="column">
				<!--地图-->
				<!-- 地图 -->
				<div class="map">
					<h3>
						<span class="icon-cube"></span>
						学位热力统计
					</h3>
					<div class="chart">
						<div id="geo" class="geo">
							
						</div>
					</div>
				</div>
				<!--用户-->
				<!-- 用户 -->
				<div class="users panel">
					<div class="inner">
						<h3>学习人次统计</h3>
						<div class="chart">
							<div class="bar"></div>
							<div class="data">
								<div class="item">
									<h4>120,899</h4>
									<span>
										<i class="icon-dot" style="color: #ed3f35"></i>
										总量
									</span>
								</div>
								<div class="item">
									<h4>248</h4>
									<span>
										<i class="icon-dot" style="color: #eacf19"></i>
										服务周期内
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="column">
				<!--订单-->
				<!-- 订单 -->
				<div class="order panel">
					<div class="inner">
						<!-- 筛选 -->
						<div class="filter">
							<a href="javascript:;" data-key="day365" class="active">总计</a>
							<a href="javascript:;" data-key="day90">本周</a>
							<a href="javascript:;" data-key="day30">本月</a>
							<a href="javascript:;" data-key="day1">本季度</a>
						</div>
						<!-- 数据 -->
						<div class="data">
							<div class="item">
								<h4>20,301,987</h4>
								<span>
									<i class="icon-dot" style="color: #ed3f35;"></i>
									邀约
								</span>
							</div>
							<div class="item">
								<h4>99834</h4>
								<span>
									<i class="icon-dot" style="color: #eacf19;"></i>
									成交
								</span>
							</div>
						</div>
					</div>
				</div>
				<!--销售-->
				<!-- 销售额 -->
				<div class="sales panel">
					<div class="inner">
						<div class="caption">
							<h3>本月成交</h3>
							<!-- <a href="javascript:;" class="active" data-type="year">月</a> -->
							<!-- <a href="javascript:;" data-type="quarter">季</a> -->
							<a href="javascript:;" class="active" data-type="month">月</a>
							<a href="javascript:;" data-type="week">日</a>
						</div>
						<div class="chart">
							<div class="label">单位:个</div>
							<div class="line"></div>
						</div>
					</div>
				</div>
				<!-- 渠道 季度 -->
				<div class="wrap">
					<div class="channel panel">
						<div class="inner">
							<h3>销售统计</h3>
							<div class="data">
								<div class="item">
									<h4>39%</h4>
									<span>
										<i class="icon-plane"></i>
										成交率
									</span>
								</div>
								<div class="item">
									<h4>28%</h4>
									<span>
										<i class="icon-bag"></i>
										激活率
									</span>
								</div>
							</div>
							<div class="data">
								<div class="item">
									<h4>20%</h4>
									<span>
										<i class="icon-train"></i>
										转化率
									</span>
								</div>
								<div class="item">
									<h4>13%</h4>
									<span>
										<i class="icon-bus"></i>
										流失率
									</span>
								</div>
							</div>
						</div>
					</div>
					<div class="quarter panel">
						<div class="inner">
							<h3>续费</h3>
							<div class="chart">
								<div class="box">
									<div class="gauge"></div>
									<div class="label">75<small> %</small></div>
								</div>
								<div class="data">
									<div class="item">
										<h4>100</h4>
										<span>
											<i class="icon-dot" style="color: #6acca3"></i>
											总人数
										</span>
									</div>
									<div class="item">
										<h4>75</h4>
										<span>
											<i class="icon-dot" style="color: #ed3f35"></i>
											续费人数
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--排行-->
				<!-- 排行榜 -->
				<div class="top panel chengjiao">
					<div class="inner">
						<div class="all">
							<h3>成交榜</h3>
							<ul>
								<li>
									<i class="icon-cup1" style="color: #d93f36;"></i>
									<span>张三三</span>
								</li>
								<li>
									<i class="icon-cup2" style="color: #68d8fe;"></i>
									<span>李四四</span>
								</li>
								<li>
									<i class="icon-cup3" style="color: #4c9bfd;"></i>
									<span>王五五</span>
								</li>
							</ul>
						</div>
						<div class="province">
							<h3>数据热榜 <i class="date">// 近30日 //</i></h3>
							<div class="data">
								<ul class="sup">
									<li data-key="pxreclist">
										<span>陪学师</span>
										<span class="val">25,179 <s class="icon-up"></s></span>
									</li>
									<li data-key="pblist">
										<span>陪伴师</span>
										<span class="val">23,252 <s class="icon-down"></s></span>
									</li>
									<li data-key="zixunlist">
										<span>咨询师</span>
										<span class="val">20,760 <s class="icon-up"></s></span>
									</li>
									<li data-key="deal_list">
										<span>成交额</span>
										<span class="val">23,252 <s class="icon-down"></s></span>
									</li>
									<li data-key="dealer_list">
										<span>成交人</span>
										<span class="val">20 <s class="icon-up"></s></span>
									</li>
								</ul>
								<ul class="sub">
									<!-- <li><span>数据</span><span> 数据<s class="icon-up"></s></span></li>
                  <li><span>数据</span><span> 数据<s class="icon-up"></s></span></li>
                  <li><span>数据</span><span> 数据<s class="icon-up"></s></span></li>
                  <li><span>数据</span><span> 数据<s class="icon-up"></s></span></li>
                  <li><span>数据</span><span> 数据<s class="icon-up"></s></span></li>
                  <li><span>数据</span><span> 数据<s class="icon-up"></s></span></li> -->
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
		<script src="js/index.js"></script>
		<script src="js/china.js"></script>
		<!-- <script src="js/mymap.js"></script> -->
		<!-- <script src="js/heatmap.js"></script> -->
		<style>
			.image1 {
				color: #333;
				background: url('./images/unselected1.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				/* background: url('images/unselected1.png') 100% 100% no-repeat; */
			}
			// 使用
			.image2 {
				/* background: url('./images/selected.png'); */
				background-size: 100% 100%;
				background-repeat: no-repeat;
				color: #fff;
				background: url('images/selected.png') 100% 100% no-repeat;
			}
			
			// 维修
			.image3 {
				background: url('./images/bought.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				color: #fff;
				/* background: url('images/bought.png') 100% 100% no-repeat; */
			}
			
			// 过道
			.image4 {
				opacity: 0;
				overflow: hidden;
			}
		</style>
	</body>
</html>